<template>
  <div id="taxi">
    <div class="banner">
      <img src="../../assets/img/phone/taix.png" alt="" />
    </div>
    <div class="center">
      <trip-init txt1="国内" txt2="海外" :subnav="false">
        <!-- //插槽 -->
        <template #newtext>
          <!-- 输入框 -->
          <div class="nice_shuru">
            <van-cell-group>
              <van-field v-model="value1" placeholder="降落的机场" />
              <van-field v-model="value2" placeholder="您在哪里下车" />
              <van-field v-model="value3" placeholder="用车时间" />
            </van-cell-group>
          </div>
          <!-- BUtton按钮 -->
          <div class="nice_button">
            <van-button type="danger">查询</van-button>
          </div>
        </template>
      </trip-init>
    </div>
    <div class="footer">
      <span>一件全包</span>
      <span>丨</span>
      <span>航变无忧</span>
      <span>丨</span>
      <span>爽约退赔</span>
      <span>丨</span>
      <span>确认保障</span>
    </div>
  </div>
</template>

<script>
import tripInit from "../common/Tripinit.vue"; //中间的组件
import { Field, CellGroup, Button } from "vant";
import { ref } from "vue";
export default {
  name: "Taxi",
  setup() {
    let value1 = ref("");
    let value2 = ref("");
    let value3 = ref("");
    return {
      value1,
      value2,
      value3,
    };
  },
  components: {
    tripInit,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
  },
};
</script>
<style lang="less" scoped>
#taxi {
  position: relative;
  > .banner {
    img {
      display: block;
      width: 414px;
      height: 173px;
    }
  }
  > .center {
    width: calc(100% - 20px);
    position: absolute;
    top: 105px;
    margin: 0 10px;
    //输入框
    .nice_shuru {
      .van-cell-group {
        .van-cell {
          height: 60px;
          /deep/.van-field__body {
            border-bottom: 1px solid black;
            .van-field__control::placeholder {
              color: black;
              font-size: 15px;
            }
          }
        }
      }
    }
    //button按钮
    .nice_button {
      width: 100%;
      text-align: center;
      .van-button {
        width: 336.5px;
      }
    }
  }
  > .footer {
    position: absolute;
    top: 450px;
    width: calc(100% - 20px);
    font-size: 16px;
    text-align: center;
  }
}
</style>
